<!-- 
    Security Knowledge Framework is an expert system application 
    that uses OWASP Application Security Verification Standard, code examples,
    helps developers in pre-development and post-development.  
    Copyright (C) 2020  Glenn ten Cate, Riccardo ten Cate

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as
    published by the Free Software Foundation, either version 3 of the
    License, or (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program. If not, see <http://www.gnu.org/licenses/>.
-->

<section *ngIf="isLoggedin || skipLogin" id="container" class="animsition">
    <!-- **********************************************************************************************************************************************************
      TOP BAR CONTENT & NOTIFICATIONS
      *********************************************************************************************************************************************************** -->
    <!--header start-->
    <header class="header black-bg">
        <!--logo start-->
        <a id="dashboard" routerLink="/dashboard" class="logo"><img class="img" width="35" height="35" src="assets/img/logos/logo.svg" alt="Logo" /> Security Knowledge Framework
            </a>
        <!--logo end-->
        
        <div class="right">            
            <div class="row" *ngIf="skipLogin" class="btn-group theme-container animated">
                <button class="btn btn-default" (click)="logIn()"><i class="fa fa-sign-in"></i> Login</button>
            </div>

            <div class="row" *ngIf="isLoggedin" class="btn-group theme-container animated">
                <div ngbDropdown>
                    <button class="btn btn-default dropdown-toggle user" id="user-profile" ngbDropdownToggle>
                        <span class="image"><img src="assets/img/placeholder-male.jpg" alt="Placeholder" width="250" height="250" /> </span>
                        <span class="name">
                            {{user}}
                        </span>
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownBasic2">
                        <button (click)="LogOff()" class="dropdown-item" id="user-logout"><i class="fa fa-power-off"></i> Logout</button>
                    </div>
                </div>
            </div>
        </div>
    
    </header>
    <!--header end-->

    <!-- **********************************************************************************************************************************************************
      MAIN SIDEBAR MENU
      *********************************************************************************************************************************************************** -->
    <!--sidebar start-->
    <aside>
        <div id="sidebar" class="nav-collapse ">
            <!-- sidebar menu start-->
            <ul class="sidebar-menu" id="nav-accordion">
                <li  *ngIf="isLoggedin"[style.background-color]="getProjectStyle()" class="">
                    <a routerLink="/project-list" (click)="ResetAll(); ProjectsShow()" id="5" class="primairy">
                        <i class="fa fa-book"></i>
                        <span id="1">Manage projects</span>
                    </a>
                </li>
                <li *ngIf="canManage" [style.background-color]="getUSerStyle()" class="sub-menu">
                    <a (click)="UsersShow()" id="2" class="primairy" href="javascript:;">
                        <i class="fa fa-user"></i>
                        <span id="2">Users</span>
                    </a>
                    <ul *ngIf="users" class="sub" style="display:block;">
                        <li><a routerLink="/user-add" id="2">Add users</a></li>
                        <li><a routerLink="/user-manage" id="2">Manage users</a></li>
                    </ul>
                </li>
                <li [style.background-color]="getChecklistStyle()" class="sub-menu">
                    <a (click)="CheckShow()" id="7" class="primairy" href="javascript:;">
                        <i class="fa fa-list-alt"></i>
                        <span id="7">Checklist options</span>
                    </a>
                    <ul *ngIf="check" class="sub"  style="display:block;">
                        <li><a routerLink="/checklist" id="7">View checklists</a></li>
                        <li><a *ngIf="canManage" routerLink="/checklist-summary" id="checklist-summary">Manage checklists</a></li>
                        <li><a *ngIf="canManage" routerLink="/category-list" id="category-lis">Manage categories</a></li>
                    </ul>
                </li>
                <li [style.background-color]="getKnowledgeStyle()" class="">
                    <a routerLink="/knowledgebase" (click)="ResetAll(); KnowledgeShow()" id="5" class="primairy">
                        <i class="fa fa-book"></i>
                        <span id="5">Knowledge Base</span>
                    </a>
                </li>
                <li [style.background-color]="getCodeStyle()" class="">
                    <a routerLink="/code-examples" (click)="ResetAll(); CodeShow()" id="6" class="primairy">
                        <i class="fa fa-code"></i>
                        <span id="6">Code examples</span>
                    </a>
                </li>
                <li [style.background-color]="getLabsStyle()" class="">
                    <a routerLink="/labs" (click)="ResetAll(); LabsShow()" id="7" class="primairy">
                        <i class="fa fa-flask"></i>
                        <span id="6">Labs</span>
                    </a>
                </li>
            </ul>

            <div class="copy">
                <img width="40" height="40" src="assets/img/logos/owasp-icon-grey.svg"> Supported by <a href="https://www.owasp.org/index.php?title=OWASP_Security_Knowledge_Framework">OWASP</a>
            </div>

            <!-- sidebar menu end-->
        </div>
    </aside>
    <!--sidebar end-->
</section>
